<template>
	<view class="pages">
		<view class="bac"></view>
		<view class="mpouter">
			<map class="mp" :longitude="longitude" :latitude="latitude" scale="12"></map>

			<view class="bottom">
				<view class="left">
					<view>车百事汽车生活馆</view>
					<view>山阳区人民路与解放路交叉口</view>
				</view>
				<view class="right">
					<button class="gomap">导航</button>
				</view>
			</view>


		</view>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const latitude = ref(34.827055)
	const longitude = ref(113.55346)
</script>

<style>
	.pages {
		background-color: white;
	}

	.bac {
		background-color: #2b85e4;
		height: 300rpx;
	}

	.mpouter {
		width: 90%;
		height: 1600rpx;
		border-radius: 50rpx;
		background-color: white;
		margin-left: 40rpx;
		margin-top: -280rpx;

	}

	.mp {
		width: 90%;
		height: 900rpx;
		padding: 30rpx 35rpx;

	}
	.bottom{
		display: flex;
		justify-content: space-around;
	}
	.left view:nth-child(1){
		font-size: 32rpx;
		font-weight: bold;
	}
	.left view:nth-child(2){
		margin-top: 20rpx;
		font-size: 25rpx;
	}
	
	.gomap{
		background-color: #2b85e4;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: white;
		width: 180rpx;
		
	}
</style>